import React, { Component } from 'react'

/**
 * 属性可以从父组件中获取，状态不能
 * 属性可以由父组件修改，状态不能
 * 属性能在内部设置默认值，状态也可以，设置方式不一样
 * 属性不在组件内部修改，状态要在组件内部修改
 * 属性能设置子组件初始值，状态不可以
 * 属性可以修改子组件的值，状态不可以
 */
class Child extends Component {
    render() {
        return (
            <div>
                child-{this.props.text}

                {/* 子组件中不能修改属性 => 单向数据流 */}
                <button onClick={() => {
                    this.props.text = '3333'
                }}>click-子</button>
            </div>
        )
    }
}


export default class App extends Component {
    state = {
        text: '1111'
    }

    render() {
        return (
            <div>
                <button onClick={
                    () => {
                        this.setState({
                            text: '2222'
                        })
                    }
                }>click-父</button>
                <Child text={this.state.text} />
            </div>
        )
    }
}
